<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
<div class="item" :class="{done:nodeType === 'done', todo: nodeType === 'todo', end: isEnd, start: isFirst, more1: more1, more2: more2 }">
  <div class="name">{{title}}</div>
  <div class="progress">
    <div class="line l" />
    <div class="icon" />
    <div class="line r" />
  </div>
  <div class="time">{{time}}</div>
  <div class="sign" :title="desc" @click="setClick">
    <div class="sign2">
    {{desc}}
    </div>
  </div>
</div>
</template>

<script>
export default {
  props: {
    nodeType: {
      type: String,
      default: ''
    },
    more1: {
      type: Boolean,
      Boolean
    },
    more2: {
      type: Boolean,
      Boolean
    },
    isFirst: {
      type: Boolean,
      default: false
    },
    isEnd: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },
    time: {
      type: String,
      default: ''
    }
  },
  methods: {
    setClick() {
      // console.log(this)
    }
  }
}
</script>

<style lang="scss" scoped>
/*@import '/src/styles/variables.scss'; */

.item {
  background-color: #FFF;
  color: #409eff;
  font-size: 16px;
  text-align: center;
  flex: 1;
  width: 185px;
  .name {
    height: 30px;
  }
  .time {
    color: #606266;
    font-size: 12px;
    padding: 5px 0;
  }
  .progress {
    width: 100%;
    height: 30px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .line {
    height: 100%;
    flex: 1;
    position: relative;
  }

  .icon {
    background: #FFF url('./i0.png') no-repeat center center;
    width: 24px;
    height: 22px;
    position: relative;
    z-index: 1;
  }

}
.todo {
  .icon {
    width: 30px;
    height: 30px;
    background-image: url('./i1.png');
  }
  .l::after {
    border-top: 3px solid;
    z-index: 1;
  }
}
.done {
  .l::after,.r::after {
    border-top: 3px solid;
    z-index: 1;
  }
  .icon {
    background-image: url('./i2.png');
  }
}
.start {
  .l::after {
    border-top: 3px solid #FFF;
    z-index: 1;
  }
}
.end {
  .r::after {
    border-top: 3px solid #FFF;
    z-index: 1;
  }
}
.more1 {
  .r::after {
    background-color: #FFF;
    border-top: 3px dotted;
    z-index: 1;
  }
}
.more2 {
  padding-left: 3px;
  background-color: #FFF;
  position: relative;
  z-index: 1;
  .l::after {
    background-color: #FFF;
    border-top: 3px dotted;
    z-index: 1;
  }
}

</style>
